<script lang="ts" setup>
import { PRIMARY_COLOR } from '@/config'
import OrdersList from './components/OrdersList.vue';
import OnDeliver from './components/OnDeliver.vue';
import RemainEvaluate from './components/RemainEvaluate.vue';
import OrderRefund from './components/OrderRefund.vue';

const TAB_LIST = [
  {
    value: 1,
    label: '全部',
    component: OrdersList,
  },
  {
    value: 2,
    label: '进行中',
    component: OnDeliver,
  },
  {
    value: 3,
    label: '待评价',
    component: RemainEvaluate,
  },
  {
    value: 4,
    label: '退款',
    component: OrderRefund,
  },
]
</script>

<template>
  <div class="order-page op-fullscreen">
    <div class="order-page__nav"></div>
    <VanTabs :color="PRIMARY_COLOR" sticky animated swipeable>
      <VanTab v-for="v in TAB_LIST" :key="v.value" :title="v.label" :name="v.value">
        <component :is="v.component"></component>
      </VanTab>
    </VanTabs>
  </div>
</template>

<style lang="scss" scoped>
.order-page {
  --van-tabs-nav-background: #f4f8fb;
  --van-tab-text-color: rgb(50, 50, 51);

  background: #f4f8fb;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
